<template>
	<!-- 邀请朋友 -->
	<view class="content display  width-100 displayColumn">
		<u-navbar  :autoBack="true" bgColor="transparent">
			<template slot="left">
				<uni-icons type="left" color="#ffffff" size="23" @click="back"></uni-icons>
			</template>
		</u-navbar>
		<view class="bg1 display  width-100 displayColumn">
			<view class="bg2 display  width-100">
				<view class="bg2_all display  M-L24">
					
				</view>
			</view>
			<view class="bg3 display  width-100" >
				<view class="bg3_all display " style="width: 350rpx;height: 350rpx;">
					<img style="width: 400rpx;height: 350rpx;position: absolute;top: 270rpx;" :src="imgs" alt="" />
				</view>
			</view>
		</view>
		<view class="other_all display  width-100 all_item">
			<view class="other_all_699 display  displayColumn width_699">
				<view class="fn_one display  width-100 M-T24">
					<view class="fn_one_item display  all_item M-L80">
						<img class="img" src="@/static/img2/item1.png" alt="" />
					</view>
					<view class="fn_one_item1 display  all_item">
						<img class="img" src="@/static/img2/item2.png" alt="" />
					</view>
					<view class="fn_one_item2 display  all_item M-R80">
						<img class="img" src="@/static/img2/item3.png" alt="" />
					</view>
				</view>
				<!-- 线 -->
				<view class="fn_lines display M-L24 M-T26"></view>
				<!-- 文字 -->
					<view class="fn_txt display  width-100 M-T16">
						<view class="fn_txt_one display displayColumn  all_item" style="margin-left: 62rpx;">
							<span class="fontSize font_comm fn_txt1">邀请好友</span>
							<span class="fontSize font_comm fn_txt1">成为分销员</span>
						</view>
						<view class="fn_txt_one display displayColumn  all_item">
							<span class="fontSize font_comm fn_txt1">邀请好友</span>
							<span class="fontSize font_comm fn_txt1">成为分销员</span>
						</view>
						<view class="fn_txt_one display displayColumn  all_item" style="margin-right: 62rpx;">
							<span class="fontSize font_comm fn_txt1">邀请好友</span>
							<span class="fontSize font_comm fn_txt1">成为分销员</span>
						</view>
					</view>
			<!-- 二维码 -->
				<view class="two_code display  width_699 all_item displayColumn" style="margin-top: 60rpx;">
					
					<canvas id="qrcode" canvas-id="qrcode" style="width:322rpx;height: 322rpx;"></canvas>
					<span class="fontSize font_comm fn_ttx2" style="margin-top: 20rpx;">好友打开微信扫一扫即可邀请</span>
				</view>
				<!-- 按钮 -->
				<view class="two_button display  width-100 all_item M-T50">
					<button class="fontSize font_comm fn_txt3 display all_item">
						<img class="fn_img" src="@/static/img2/link.png" alt="" />
						<span class="M-L12">复制链接</span>
					</button>
					<button class="fontSize font_comm fn_txt4 display all_item">
						<img class="fn_img" src="@/static/img2/imgs2.png" alt="" />
						<span class="M-L12">复制链接</span>
					</button>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import UQRCode from '@/utils/uqrcode.js';
	export default {
		data() {
			return {
				imgs:this.$imgUrls + '2024/11/16/55d738119c2e47b588f363a7bb40cc67.png'
			}
		},
		onReady() {
			
			this.getCode();
		},
		methods: {
			getCode(){
				// 获取uQRCode实例
								var qr = new UQRCode();
								// 设置二维码内容
								qr.data = '1225454';
								// 设置二维码大小，必须与canvas设置的宽高一致
								qr.size = 161; //默认为px
								// 调用制作二维码方法
								qr.make();
								// 获取canvas上下文
								var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
								// 设置uQRCode实例的canvas上下文
								qr.canvasContext = canvasContext;
								// 调用绘制方法将二维码图案绘制到canvas上
								qr.drawCanvas();
			},
			back(){
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	page{
		width: 750rpx;
		height: 1624rpx;
		background: linear-gradient( 180deg, #EE7E32 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
</style>
<style scoped lang="scss">
.content{
	min-height: 100vh;
}
.bg1{
	height: 470rpx;
	background: url('@/static/img2/bg1.png') no-repeat;
	background-size: 100%;
}
.bg2{
	margin-top: 150rpx;
	.bg2_all{
		width: 500rpx;
		height: 70rpx;
		background: url('@/static/img2/invitefriend.png') no-repeat;
		background-size: 100%;
	}
}
.other_all{
	min-height: 1150rpx;
	margin-top:-10rpx;
}
.other_all_699{
	width: 690rpx;
	// height: 1166rpx;
	min-height:1150rpx;
	// height: 100%;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	z-index: 1000;
}
.fn_one{
	justify-content: space-between;
	.fn_one_item{
		width: 104rpx;
		height: 104rpx;
		background: #FAF3E4;
		border-radius: 50%;
	}
	.fn_one_item1{
		width: 104rpx;
		height: 104rpx;
		background: #EEF1FB;
		border-radius: 50%;
	}
	.fn_one_item2{
		width: 104rpx;
		height: 104rpx;
		background: #FCEBEB;
		border-radius: 50%;
	}
}
.img{
	width: 40rpx;
	height: 40rpx;
}
.fn_lines{
	width: 642rpx;
	height: 12rpx;
	background: #F2F2F3;
	border-radius: 94rpx 94rpx 94rpx 94rpx;
}
.fn_txt1{
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
}
.fn_txt{
	justify-content: space-between;
}
.fn_txt_one{
	justify-content: space-between;
}
.fn_img{
	width: 32rpx;
	height: 32rpx;
}
.fn_ttx2{
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
}
.fn_txt3{
	width: 260rpx;
	height: 72rpx;
	background: #EE7E32;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 600;
	font-size: 28rpx;
	color: #FFFFFF;
}
.fn_txt4{
	width: 260rpx;
	height: 72rpx;
	background: #126BC9;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 600;
	font-size: 28rpx;
	color: #FFFFFF;
}
</style>
